<template>
	<view class="drag-ball-box" :class="[orientation,{active:!dragMoveSatus}]" id="drag-ball"
		:style="'left:'+left+'px;top :'+top+'px;'" @touchstart="dragStart" @touchmove="dragMove"
		@touchend="dragEnd" @click="click()">
		<view class="item-group">
			<image class="item-image" :src=src
				mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "drag_ball",
		props: {
			src:{
				type:String,
				default:"https://www.tdtye.com/files/vegetable_mall_file/default/help.png"
			}
		},
		data: function() {
			return {
				orientation: 'portrait',
				safeArea: {
					minTop: 0,
					maxTop: 0,
					minLeft: 0,
					maxLeft: 0,
					windowWidth: 0,
					windowHeight: 0
				},
				dragMoveSatus: true,
				dragEndInfo: {
					type: null,
					coordinate: null
				},
				width: 0,
				height: 0,
				left: 0,
				top: 0
			}
		},
		created: function() {
			// 横屏
			// this.orientation = 'landscape';
		},
		mounted: function() {
			this.initDragBall();
		},
		methods: {
			click(){				
				this.$emit("sonCilck");
				console.log("子点击事件");
			},
			// 手指触摸悬浮球动作开始
			dragStart: function(event) {
				if (this.orientation === 'landscape') {
					if (this.top === this.safeArea.minTop) {
						this.top += parseInt(this.height / 2); // 上面
					} else if (this.top === this.safeArea.maxTop) {
						this.top -= parseInt(this.height / 2); // 下面
					}
				} else {
					if (this.left === this.safeArea.minLeft) {
						this.left += parseInt(this.width / 2); // 左面
					} else if (this.left === this.safeArea.maxLeft) {
						this.left -= parseInt(this.width / 2); // 右面
					}
				}
			},
			// 手指触摸后移动
			dragMove: function(event) {				
				
				if (!this.dragMoveSatus) {
					this.dragMoveSatus = true;
				}
				// 定位触摸焦点及移动位置
				this.top = event.touches[0].clientY - parseInt(this.height / 2);
				this.left = event.touches[0].clientX - parseInt(this.width / 2);
			},
			// 手指触摸悬浮球动作结束，贴边并延迟隐藏
			dragEnd: function(event) {
				this.dragMoveSatus = false;
				if (this.orientation === 'landscape') {
					let halfWindowHeight = parseInt(this.safeArea.windowHeight / 2),
						halfDragBallHeight = parseInt(this.height / 2);
					this.dragEndInfo.type = 'top';
					if (this.top < halfWindowHeight) {
						this.dragEndInfo.coordinate = this.safeArea.minTop;
						this.top = this.safeArea.minTop + halfDragBallHeight;
					} else {
						this.dragEndInfo.coordinate = this.safeArea.maxTop;
						this.top = this.safeArea.maxTop - halfDragBallHeight;
					}
				} else {
					let halfWindowWidth = parseInt(this.safeArea.windowWidth / 2),
						halfDragBallWidth = parseInt(this.width / 2);
					this.dragEndInfo.type = 'left';
					if (this.left < halfWindowWidth) {
						this.dragEndInfo.coordinate = this.safeArea.minLeft;
						this.left = this.safeArea.minLeft + halfDragBallWidth;
					} else {
						this.dragEndInfo.coordinate = this.safeArea.maxLeft;
						this.left = this.safeArea.maxLeft - halfDragBallWidth;
					}
				}

				// 位置容错计算
				if (this.top < this.safeArea.minTop) {
					this.top = this.safeArea.minTop;
				} else if (this.top > this.safeArea.maxTop) {
					this.top = this.safeArea.maxTop;
				}
				if (this.left < this.safeArea.minLeft) {
					this.left = this.safeArea.minLeft;
				} else if (this.left > this.safeArea.maxLeft) {
					this.left = this.safeArea.maxLeft;
				}

				//隐藏
				setTimeout(function(that) {
					if (!that.dragMoveSatus) {
						that[that.dragEndInfo.type] = that.dragEndInfo.coordinate;
					}
				}, 1500, this);
			},
			// 计算悬浮球初始位置
			initDragBall: function() {
				console.log('initDragBall');
				let that = this;
				try {
					uni.createSelectorQuery().in(this).select('#drag-ball').fields({
						size: true
					}, dragBallSize => {
						that.width = dragBallSize.width;
						that.height = dragBallSize.height;
						uni.getSystemInfo({
							success: function(res) {
								that.safeArea.windowWidth = res.windowWidth;
								that.safeArea.windowHeight = res.windowHeight;
								if (that.orientation === 'landscape') {
									that.safeArea.minTop = -parseInt(dragBallSize.height / 2);
									that.safeArea.maxTop = res.windowHeight - parseInt(dragBallSize
										.height / 2);
									that.safeArea.minLeft = parseInt(0.06 * res.windowWidth);
									that.safeArea.maxLeft = parseInt(0.94 * res.windowWidth) -
										dragBallSize.width;
									that.left = that.safeArea.minLeft;
									that.top = that.safeArea.minTop;
									// that.left = that.safeArea.maxLeft;
									// that.top = that.safeArea.maxTop;
								} else {
									that.safeArea.minTop = parseInt(0.06 * res.windowHeight);
									that.safeArea.maxTop = parseInt(0.94 * res.windowHeight) -
										dragBallSize.height;
									that.safeArea.minLeft = -parseInt(dragBallSize.width / 2);
									that.safeArea.maxLeft = res.windowWidth - parseInt(dragBallSize
										.width / 2);
									that.left = that.safeArea.maxLeft;
									that.top = that.safeArea.minTop;
									// that.left = that.safeArea.minLeft;
									// that.top = that.safeArea.maxTop;
								}
								that.showDragBall();
							}
						});
					}).exec();
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			showDragBall: function() {
				setTimeout(function(that) {
					that.dragMoveSatus = false;
				}, 1000, this);
			}
		}
	}
</script>

<script module="dragBall" lang="renderjs">
	export default {
		methods: {

		}
	}
</script>

<style lang="scss">
	.drag-ball-box {
		position: fixed;
		overflow: hidden;
		border-radius: 50%;
		z-index: 109;

		&.portrait {
			width: 80rpx;
			height: 80rpx;
		}

		&.landscape {
			width: 40rpx;
			height: 40rpx;
		}

		&.active {
			transition: .3s;
		}

		.item-group {
			width: 100%;
			height: 100%;

			.item-image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
